---
id: badge
title: Badge
---

import Playground from '@theme/Playground';

## Colors

### Primary

<Playground>
  <span class="badge badge--primary">Primary</span>
</Playground>

### Secondary

<Playground>
  <span class="badge badge--secondary">Secondary</span>
</Playground>

### Success

<Playground>
  <span class="badge badge--success">Success</span>
</Playground>

### Info

<Playground>
  <span class="badge badge--info">Info</span>
</Playground>

### Warning

<Playground>
  <span class="badge badge--warning">Warning</span>
</Playground>

### Danger

<Playground>
  <span class="badge badge--danger">Danger</span>
</Playground>
